<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="listQuery.classificationName"
            clearable
            class="filter-item"
            style="width: 200px"
            @clear="handleFilter"
            :placeholder="$t('分类名称')"
          />
        </el-form-item>

        <el-form-item>
          <el-select v-model="listQuery.id" clearable filterable :placeholder="$t('一级菜单项')"
                     @change="getList"
                     @clear="handleOptionClear"
          >
            <el-option
              v-for="item in optionList"
              :key="item.id"
              :label="item.classificationName"
              :value="item.id">
               <span
                 style="float: left"
                 class="circle"
                 :style="{ backgroundColor: item.classificationColour}"
               ></span>
              <span style="float: left; color: #8492a6; font-size: 13px">{{ item.classificationName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ $t("一级菜单") }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            v-permission="['GET /admin/repository/list']"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >{{ $t("Search") }}</el-button
          >

<!--          <el-button
            v-permission="['GET /admin/repository/list']"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="handerCreate"
          >{{ $t("新增") }}</el-button
          >-->

          <el-button
            v-permission="['GET /admin/repository/list']"
            class="filter-item"
            :loading="syncLoading"
            type="warning"
            icon="el-icon-refresh"
            @click="handelSync"
          >{{ $t("同步") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('Searching')"
      stripe
      fit
      highlight-current-row
      row-key="id"
    >
      <el-table-column
        type="index"
        :index="getIndex"
        width="50"
      ></el-table-column>

      <!-- <el-table-column
        align="left"
        min-width="100"
        :label="$t('分类名称')"
        prop="classificationName"
      >
      </el-table-column> -->

      <template>
        <el-table-column align="left" min-width="100" :label="$t('分类名称')">
          <template slot-scope="scope">
            <span
              class="circle"
              :style="{ backgroundColor: scope.row.classificationColour }"
            ></span>
            <span :style="{ color: scope.row.classificationColour }">{{
                scope.row.classificationName
              }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        align="center"
        min-width="100"
        :label="$t('序号')"
        prop="number"
      />

      <el-table-column align="center" :label="$t('备注')" prop="remark" />

      <el-table-column
        align="center"
        :label="$t('Operate')"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="{ row }">
          {{ $t("Operate") }}
          <i class="el-icon-setting" style="color: #d35e32"></i>
        </template>

        <template slot-scope="scope">
          <!-- <el-link
            v-permission="['GET /admin/order/detail']"
            icon="el-icon-view"
            type="info"
            plain1
            size="mini"
            @click=""
            >{{ $t("新建子分类") }}</el-link
          > -->
<!--          <el-link
            v-if="scope.row.pid == undefined"
            :underline="false"
            type="primary"
            @click="handerCreateSubclass(scope.row.id)"
            size="small"
          ><i class="el-icon-edit"></i>{{ $t("新建子分类") }}</el-link
          >-->

          <el-link
            :underline="false"
            type="primary"
            @click="handerEdit(scope.row)"
            size="small"
          ><i class="el-icon-edit"></i>{{ $t("编辑") }}</el-link
          >

          <el-link
            :underline="false"
            type="danger"
            @click="handerDelete(scope.row)"
            size="small"
          ><i class="el-icon-delete"></i>{{ $t("删除") }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 第一个弹框 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="dialogStatus == 'create' ? $t('新建分类') : $t('新建子分类')"
        :visible.sync="dialogVisible1"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal ="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="materialClassificationForm"
            :rules="rules"
            ref="materialClassificationForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('分类名称')" prop="classificationName">
              <el-input
                v-model="materialClassificationForm.classificationName"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('分类颜色')" prop="classificationColour">
              <el-color-picker
                v-model="materialClassificationForm.classificationColour"
                show-alpha
                :predefine="predefineColors"
              ></el-color-picker>
            </el-form-item>

            <el-form-item :label="$t('序号')">
              <el-input v-model="materialClassificationForm.number"></el-input>
            </el-form-item>

            <el-form-item :label="$t('备注')">
              <el-input
                v-model="materialClassificationForm.remark"
                type="textarea"
                :autosize="{ minRows: 3 }"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                icon="el-icon-check"
                type="primary"
                @click="submitForm('materialClassificationForm')"
              >{{ $t("立即创建") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第二个弹框 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('编辑')"
        :visible.sync="dialogVisible2"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal ="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="materialClassificationForm"
            :rules="rules"
            ref="materialClassificationForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('分类名称')" prop="classificationName">
              <el-input
                v-model="materialClassificationForm.classificationName"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('分类颜色')" prop="classificationColour">
              <el-color-picker
                v-model="materialClassificationForm.classificationColour"
                show-alpha
                :predefine="predefineColors"
              ></el-color-picker>
            </el-form-item>

            <el-form-item :label="$t('序号')" prop="number">
              <el-input v-model="materialClassificationForm.number"></el-input>
            </el-form-item>

            <el-form-item :label="$t('备注')" prop="remark">
              <el-input
                v-model="materialClassificationForm.remark"
                type="textarea"
                :autosize="{ minRows: 3 }"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'update'"
                type="primary"
                plain1
                icon="el-icon-edit"
                @click="editCardClassification('materialClassificationForm')"
              >{{ $t("提交编辑") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>
  </div>
</template>


<script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import {sync, list, add, update, deleteById ,optionList} from "@/api/materialClassification";
export default {
  name: "repositoryList",
  components: { Pagination },
  data() {
    return {
      //同步
      syncLoading:false,

      //搜索项 一级菜单
      optionList:[],

      list: [],
      total: 0,
      listLoading: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogStatus: "",
      color: "#409EFF",
      listQuery: {
        page: 1,
        limit: 10,
        classificationName: undefined,
        id: undefined,
      },
      materialClassificationForm: {
        id: undefined,
        classificationName: undefined,
        classificationColour: "#000000",
        number: undefined,
        remark: undefined,
        pid: undefined,
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      rules: {
        classificationName: [
          {
            required: true,
            message: "请输入原料分类名称",
            trigger: "blur",
          },
        ],
        classificationColour: [
          {
            required: true,
            message: "请输入分类颜色",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getOptionList();
  },
  methods: {
    getOptionList(){
      optionList()
        .then((response) => {
          this.optionList = response.data.data;
        })
        .catch(() => {
          this.optionList = [];
        });
    },
    getList() {
      this.listLoading = true;
      list(this.listQuery)
        .then((response) => {
          this.list = response.data.data;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.listLoading = false;
        });
    },
    getIndex(index) {
      return index + 1 + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    handleFilter() {
      this.getList();
    },
    handleOptionClear(){
      this.listQuery.id = undefined;
      this.getList();
    },
    handelSync(){
      this.syncLoading = true
      sync().then((res) => {
        this.$notify({
          title: "成功",
          message: "同步成功,新增:["+res.data.data+"]共"+res.data.data.length+"条",
          type: "success",
        });
        this.syncLoading = false
        this.getList();
        this.getOptionList();
      })
      .catch((res) => {
        this.syncLoading = false
        this.$notify.error({
          title: "错误",
          message: "同步失败",
        });
      });
    },
    handerCreate() {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
      this.materialClassificationForm = {
        id: undefined,
        classificationName: undefined,
        classificationColour: "#000000",
        number: undefined,
        remark: undefined,
        pid: undefined,
      };
    },
    handerCreateSubclass(row) {
      this.dialogVisible1 = true;
      this.dialogStatus = "createSubclass";
      this.materialClassificationForm = {
        id: undefined,
        classificationName: undefined,
        classificationColour: "#000000",
        number: undefined,
        remark: undefined,
        pid: row,
      };
    },
    handleClose(done) {
      this.getList();
      done();
    },
    handerEdit(row) {
      this.dialogVisible2 = true;
      this.dialogStatus = "update";
      //   this.materialClassificationForm = row;
      this.materialClassificationForm.id = row.id;
      this.materialClassificationForm.classificationName =
        row.classificationName;
      this.materialClassificationForm.classificationColour =
        row.classificationColour;
      this.materialClassificationForm.number = row.number;
      this.materialClassificationForm.remark = row.remark;
      this.materialClassificationForm.pid = row.pid;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.materialClassificationForm)
            .then((res) => {
              if (res.data.data == 100) {
                this.$notify({
                  title: "警告",
                  message: "这是一条警告的提示消息",
                  type: "warning",
                });
              } else {
                this.dialogVisible1 = false;
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                this.$refs["materialClassificationForm"].resetFields();
                this.getList();
              }
            })
            .catch((error) => {
              console.error("请求错误：", error);
              if (error.data.errno == 1001) {
                this.$notify.error({
                  title: "错误",
                  message: error.data.errmsg,
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "创建失败",
                });
              }
            });
        } else {
          return false;
        }
      });
    },

    editCardClassification(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.materialClassificationForm)
            .then((res) => {
              this.dialogVisible2 = false;
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
              });
              this.getList();
            })
            .catch((error) => {
              console.error("请求错误：", error);
              if (error.data.errno == 1001) {
                this.$notify.error({
                  title: "错误",
                  message: error.data.errmsg,
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "编辑失败",
                });
              }
              // this.$notify.error({
              //   title: "错误",
              //   message: "编辑失败",
              // });
            });
        } else {
          return false;
        }
      });
    },

    handerDelete(row) {
      console.log(1231123321);
      console.log(row);
      console.log(row.id);
      var id = row.id;
      var materialClassificationForm = {
        id: row.id,
      };
      //   if (row.classificationStatus == 0) {
      //     this.$notify({
      //       title: "警告",
      //       message: "该分类已启动！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      this.$confirm("确认删除？")
        .then((_) => {
          deleteById(materialClassificationForm)
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },
  },
  filters: {},
};
</script>
<style scoped>
</style>

<style>
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-bottom: -2px;
}
</style>
